import Base from '@/components/Base';
import { KayButton, Image, View } from '@/components/KayUI';
import lottie from 'lottie-web';
import genimiSvg from '@/static/genimiSvg.json';
import styles from './index.less';

interface State {}

const SvgTree = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      viewBox="0 0 1366 768"
      id="treeSvg"
    >
      <defs>
        <filter id="f1" x="0" y="0">
          <feGaussianBlur
            in="SourceGraphic"
            stdDeviation="12"
            result="svgFilter"
          />
          <feBlend in="SourceGraphic" in2="svgFilter" mode="normal" />
        </filter>
      </defs>
      <g filter="url(#f1)">
        <path d="M716.05,787.22c0-58.05,0-116.09,0-174.14c0-25.4-27.81-44.78-59.6-45.21c-41.06-0.56-58.97-4.13-72-12  c-14.79-8.93-20.93-21.21-36.42-29.58c-19.83-10.72-47.58-10.16-67.39-8.66c-44.65,3.36-72,3.36-107.16-18.07" />
        <path d="M716.05,787.22c0-58.05,0-116.09,0-174.14c0-25.4-27.81-44.78-59.6-45.21c-41.06-0.56-58.97-4.13-72-12  c-14.79-8.93-20.93-21.21-36.42-29.58c-19.83-10.72-47.56-9.82-67.39-8.66c-25.42,1.48-48-52.73-115.26-33.2" />
        <path d="M717.35,787.22c0-60.04,0-120.08,0-180.12c0-36.16-15.29-53.02-31.6-60.72c-30.32-14.33-79.53-6.98-118.6-21.49  " />
        <path d="M717.35,787.22c0-60.04,0-120.08,0-180.12c0-76.07-71.78-38.12-134.02-65.47" />
        <path d="M718.65,787.22c0-62.28,0-124.56,0-186.83c0-38.93-14.87-65.23-64.99-74.93c-33.3-6.45-112.8-8.85-134.51-13.4  c-23.16-4.85-53.27-15.63-66.98-27.63c-44.93-39.35-73.95-32.09-98.37-15.32" />
        <path d="M719.95,787.22c0-64.7,0-129.4,0-194.09c0-45.63-24.8-68.23-85.82-82.74c-42.7-10.16-64.93-3.09-102.75-11.85  c-39.23-9.08-57.2-31.22-75.86-55.13c-42.7-54.7-85.91-24.84-109.73,7.4" />
        <path d="M719.95,787.22c0-64.7,0-129.4,0-194.09c0-45.63-24.8-68.23-85.82-82.74c-42.7-10.16-64.93-3.09-102.75-11.85  c-39.23-9.08-58.74-6.1-78.1-29.45c-33.77-40.74-71.97-35.33-104.13-9.86" />
        <path d="M721.25,787.22c0-66.58,0-133.15,0-199.73c0-40.55-20.43-69.86-84.33-86.72  c-63.57-16.77-92.15-3.5-127.82-26.66c-30.52-19.83-32.26-50.54-44-64.06c-32.07-36.91-73.13-37.51-123.58,16.94" />
        <path d="M722.55,787.22c0-68.28,0-136.56,0-204.84c0-54.42-36.24-78.7-63.59-91.01  c-36.48-16.42-86.98-15.11-109.12-23.97c-40.47-16.19-41.18-55.49-62.39-83.4c-23.13-30.44-88.03-53.26-145.94,23.77" />
        <path d="M722.55,787.22c0-68.28,0-136.56,0-204.84c0-54.42-36.24-78.7-63.59-91.01  c-36.48-16.42-88.19-15.32-109.12-23.97c-28.47,9.35-55.95-54.31-83.99-79.67" />
        <path d="M723.85,787.22c0-70.23,0-140.46,0-210.7c0-44.93-17.54-73.99-42.56-88.37c-54.84-31.53-71.77-17.85-108-36.09  c-40.33-20.31-47.45-51.99-65.75-77.25c-18.94-26.14-88.97-74.01-166.02,9.2" />
        <path d="M724.04,787.22c0-70.23,0-140.46,0-210.7c0-44.93-17.3-74.43-42.56-88.37c-46.76-25.82-68.61-21.65-85.92-27.72  c-29.03-10.19-54.68,5.32-90.68-72.69" />
        <path d="M725.15,787.22c0-71.95,0-143.91,0-215.86c0-48.01-15.96-74.09-39.96-91.67  c-38.38-28.11-66.7-22.33-86.79-36.84c-35.01-25.29-46.6-50.42-72.3-83.57c-21.12-27.25-76.31-63.43-176.94-6.06" />
        <path d="M725.15,787.22c0-71.95,0-143.91,0-215.86c0-48.01-15.96-74.09-39.96-91.67  c-38.38-28.11-66.7-22.33-86.79-36.84c-35.01-25.29-48.05-58.84-45.78-68.04c8.28-33.47-60.47-107.21-192.48-41.3" />
        <path d="M726.45,787.22c0-72.7,0-145.4,0-218.09c0-67.4-37.35-113.51-85.34-128.4c-52.08-16.15-64.67-60.79-79.91-99.74  c-18.33-46.88-101.22-81.77-191.59-23.94" />
        <path d="M727.75,787.22c0-73.58,0-147.15,0-220.73c0-75.09-33.35-118.62-85.5-147.08  c-48.88-26.68-45.97-33.71-66.89-94.99c-15.63-45.77-85.88-82.98-183.38-32.96" />
        <path d="M727.75,787.22c0-73.58,0-147.15,0-220.73c0-75.09-33.35-118.62-85.5-147.08c-48.88-26.68-41.5-47.47-48.7-98.4  c-6.46-45.7-84.74-102.3-182.25-52.29" />
        <path d="M729.05,787.22c0-74.14,0-148.28,0-222.42c0-56.93-15.17-118.6-83.66-163.2  c-29.53-19.22-34.14-29.92-36.73-78.56c-2.44-45.78-33.14-113.19-180.41-75.01" />
        <path d="M729.05,787.22c0-74.14,0-148.28,0-222.42c0-56.93-15.17-118.6-83.66-163.2  c-29.53-19.22-35.93-32.1-32.14-78.71c3.71-45.69-21.6-117-151.18-89.8" />
        <path d="M730.35,787.22c0-74.7,0-149.4,0-224.09c0-65.02-7.8-94.88-24.04-125.02c-12.62-23.41-41.49-45.57-63.39-69.49  c-13.67-14.93,7.77-38.97-0.42-85.95c-13.22-75.84-127.26-83.72-150.34-72.81" />
        <path d="M730.35,787.22c0-74.7,0-149.4,0-224.09c0-65.02-7.8-94.88-24.04-125.02c-12.62-23.41-30.56-39.5-62.75-60.64  c-32.31-21.22-3.76-35.3-10.61-79.19c-11.87-76.06-97.38-88.28-151.18-77.67" />
        <path d="M731.65,787.22c0-75.49,0-150.98,0-226.46c0-139.67-20.5-149.44-59.57-194.37  c-23.96-27.56,0.85-50.02,3.91-71.72c4.74-33.65-13.4-95.72-138.21-99.13" />
        <path d="M731.65,787.22c0-75.49,0-150.98,0-226.46c0-139.67-20.5-149.44-59.57-194.37  c-23.96-27.56-0.49-53.08,15.81-67.73c27.72-24.92-13.23-110.54-118.59-117.01" />
        <path d="M732.95,787.22c0-76.63,0-153.26,0-229.89c0-130.38-1.3-159.32-37.43-198.2  c-34.22-36.83,18.36-51.07,20.09-85.4c3.54-70.02-91.26-95.16-99.24-97.76" />
        <path d="M732.95,787.22c0-76.63,0-153.26,0-229.89c0-130.38,1.91-156.32-29.9-198.81  c-24.25-32.39,29.84-47.36,37.7-80.33c13.83-57.97-80.49-97.81-88.48-100.41" />
        <path d="M734.25,787.22c0-58.05,0-174.84,0-232.88c0-67.67,12.63-85.77,15.6-115.12c2.88-28.47-2.6-47.4-13-63.63  c-28.11-43.85,0-48.16,15.6-76.46c34.07-61.83-20.8-93.23-62.01-117.49" />
        <path d="M734.25,787.22c0-58.05,0-174.84,0-232.88c0-67.67,12.63-85.77,15.6-115.12c2.88-28.47-2.42-47.52-13-63.63  c-20.92-31.85,6.43-45.01,30.53-71.05c41.58-44.92-10.24-96.81-51.46-121.07" />
        <path d="M735.55,787.22c0-76.46,0-152.93,0-229.39c0-26.79,9.23-69.17,19.13-100.74c14.79-47.16,10.88-56.65-7.26-86.23  c-18.57-30.29,15.69-37.67,37.67-66.98c29.09-38.77,14.79-74.79-33.86-114.79" />
        <path d="M735.55,787.22c0-76.46,0-152.93,0-229.39c0-26.79,9.23-69.17,19.13-100.74c14.79-47.16,10.12-50.79,1.99-70.23  c-13.71-32.77,11.15-49.55,34.66-70.01c36.56-31.82,29.04-71.23-5.83-118.97" />
        <path d="M736.85,787.22c0-75.49,0-150.98,0-226.46c0-23.72,11.81-67.63,17.41-81.63c12-30,34.73-54.42,23.86-73.95  c-22.05-39.63-8.65-53.58,15.91-70.12c45.42-30.59,53.02-64.39,19-121.83" />
        <path d="M736.85,787.22c0-75.49,0-150.98,0-226.46c0-23.72,11.81-67.63,17.41-81.63c12-30,33.09-55.57,27.21-75.14  c-12.95-43.1,6.51-46.36,31.07-62.9c45.42-30.59,48.84-75.4,12.5-124.28" />
        <path d="M736.85,787.22c0-75.49,0-150.98,0-226.46c0-23.72,11.81-67.63,17.41-81.63c12-30,32.95-58.05,27.21-75.14  c-8.34-24.82-8.12-41.83,21.22-45.85c27.66-3.79,81.84-53.6,51.53-125.03" />
        <path d="M738.15,787.22c0-74.7,0-141.72,0-216.42c0-49.11,22.9-90.28,42.1-112.3c18.55-21.27-7.63-58.3,22.44-83.69" />
        <path d="M738.15,787.22c0-74.7,0-141.72,0-216.42c0-49.11,23.51-93.91,51.42-121.53c20.87-20.66-0.56-51.63,35.72-74.79  c66.52-42.47,56.37-95.16,49.44-122.78" />
        <path d="M738.15,787.22c0-74.7,0-141.72,0-216.42c0-49.11,23.51-93.91,51.42-121.53c20.87-20.66,6.69-42.98,51.4-70.1  c55.28-33.54,53.42-56.64,53.05-118.15" />
        <path d="M739.45,787.22c0-74.14,0-140.88,0-215.02c0-20.23,9.1-61.81,31.98-80.82c23.89-19.85,46.05-23.41,52.47-49.64  c7.56-30.9,22.97-43.73,37.6-49.67c50.79-20.65,47.52-74.91,52.26-109.95" />
        <path d="M739.45,787.22c0-74.14,0-140.88,0-215.02c0-20.23,9.1-61.81,31.98-80.82c23.89-19.85,46.47-23.31,52.47-49.64  c4.46-19.6,36.55-39.75,51.17-45.69c50.79-20.65,43.54-38.19,54.45-91.5" />
        <path d="M740.75,787.22c0-73.58,0-139.48,0-213.06c0-54.7,36.4-69.5,66.54-82.79c33.35-14.7,12.77-52.58,64.88-71.18  c38.98-13.91,54.12-47.68,62.18-94.07" />
        <path d="M740.75,787.22c0-73.58,0-139.48,0-213.06c0-54.7,36.4-69.5,66.54-82.79c33.35-14.7,32.65-52.57,72.49-61.92  c32.5-7.63,53.51-41.71,69.33-83.7" />
        <path d="M740.75,787.22c0-73.58,0-139.48,0-213.06c0-54.7,36.4-69.5,66.54-82.79c33.35-14.7,34.92-58.61,76.48-60.55  c41.77-1.94,44.46-7.27,72.17-64.11" />
        <path d="M740.75,787.22c0-73.58,0-139.48,0-213.06c0-54.7,35.22-67.15,39.6-66.01c21.24,5.51,35.39-2.3,52.31-21.17  c23.51-26.21,15.11-37.28,54.97-47.77" />
        <path d="M742.05,787.22c0-72.7,0-137.58,0-210.28c0-30,22.89-61.73,48.63-59.44c18.22,1.62,44.93-4.33,51.35-22.46  c6.45-18.22,26.23-37.4,56.93-42.7c46.98-8.11,60.28-32.37,74.81-64.6" />
        <path d="M742.05,787.22c0-72.7,0-137.58,0-210.28c0-30,22.89-61.73,48.63-59.44c18.22,1.62,44.93-4.33,51.35-22.46  c6.45-18.22,25.34-35.05,56.37-32.37c45.21,3.91,77.86-32.37,82.33-56.37" />
        <path d="M743.35,787.22c0-71.95,0-113.63,0-185.58c0-24.56,15.3-68.93,47.89-66.48c16.14,1.21,46.88-2.17,59.16-26.73  c11.1-22.19,42.39-33.8,59.16-31.81c37.95,4.49,54.98-8.65,73.93-53.05" />
        <path d="M743.35,787.22c0-71.95,0-113.63,0-185.58c0-24.56,15.3-68.93,47.89-66.48c16.14,1.21,46.88-2.17,59.16-26.73  c11.1-22.19,39.04-18.97,55.81-17.05c29.58,3.38,67.56-10.85,79.46-49.09" />
        <path d="M744.65,787.22c0-70.23,0-103.77,0-174c0-43.95,23.17-64.02,55.44-60.42c15.47,1.73,25.3-2.54,34.07-14.51  c20.43-27.91,51.25-26.06,68.64-25.05c39.42,2.3,63.98-1.25,82.88-54.03" />
        <path d="M744.65,787.22c0-70.23,0-103.77,0-174c0-43.95,23.17-64.02,55.44-60.42c15.47,1.73,25.3-2.54,34.07-14.51  c20.43-27.91,65.92-14.17,79.6-15.91c29.76-3.78,55.53,1.73,71.92-41.86" />
        <path d="M745.95,787.22c0-68.28,0-101.67,0-169.95c0-24,17.17-54.75,36.92-52.47c31.88,3.68,39.35,1.68,48.84-9.49  c16.8-19.79,45.03-23.58,66.98-22.6c44.09,1.95,72-1.4,84.82-33.15" />
        <path d="M745.95,787.22c0-68.28,0-101.67,0-169.95c0-24,17.17-54.75,36.92-52.47c31.88,3.68,39.35,1.68,48.84-9.49  c16.8-19.79,36.67-9.8,58.33-6.12c45.77,7.79,77.88,0.2,90.7-31.56" />
        <path d="M747.25,787.22c0-66.58,0-99.23,0-165.8c0-30.5,20.19-44.79,41.76-40.99c28.47,5.02,32.19-2.71,37.59-8.93  c15.99-18.42,38.56-15.24,64.55-12.28c20.66,2.35,75.91,14.94,86.23-24.56" />
        <path d="M747.25,787.22c0-66.58,0-99.23,0-165.8c0-30.5,20.19-44.79,41.76-40.99c28.47,5.02,32.03-2.85,37.59-8.93  c10.97-12,26.31,4.47,57.57,4.47c20.79,0,78.42,7.23,89.6-21.21" />
        <path d="M747.25,787.22c0-66.58,0-99.23,0-165.8c0-30.5,20.19-44.79,41.76-40.99c28.47,5.02,32.03-2.85,37.59-8.93  c10.97-12,26.31,4.47,57.57,4.47c20.79,0,29.58,33.77,82.88,7.23" />
      </g>
    </svg>
  );
};

export default class Index extends Base<any, State> {
  public state: State = {};
  private el: any = null;
  private anim: any = null;
  private animateFrame: any;

  public didMount() {
    this.initData();
    this.initSvgTree();
  }

  public willUnmount() {
    this.anim && this.anim.destroy();
    cancelAnimationFrame(this.animateFrame);
  }

  public render() {
    const {} = this.state;
    return (
      <View className={styles.container}>
        <div className={styles.main}>
          <div className={styles.sticky}>
            <View className={styles.inner}>
              <Image
                src={this.assets.svgGenimiBg}
                style={{
                  width: '100%',
                }}
              />
              <View className={styles.svgBox} ref={(e) => (this.el = e)}></View>
            </View>
          </div>
        </div>
        <div className={styles.main}>
          <div className={styles.sticky}>
            <View className={styles.inner}>
              <Image
                src={this.assets.svgTreeBg}
                style={{
                  width: '100%',
                }}
              />
              <View className={styles.svgBox}>
                <SvgTree />
              </View>
            </View>
          </div>
        </div>
      </View>
    );
  }

  private initData = () => {
    const option = {
      container: this.el,
      animationData: genimiSvg,
      loop: false,
      autoplay: false,
    };
    this.anim = lottie.loadAnimation(option);

    this.initEventListen();
    this.animate();
  };
  private windowH = window.innerHeight;
  private currentRate: number = 0;
  private currentRateSmooth: number = 0;
  private initEventListen = () => {
    window.addEventListener('scroll', (e: any) => {
      var scrollTop = document.documentElement.scrollTop;
      if (scrollTop < 10) {
        this.currentRate = 0;
        return;
      }
      this.currentRate = scrollTop / (this.windowH * 2);
    });
  };
  private setPosition = (num) => {
    if (this.anim) {
      this.anim.goToAndStop(this.anim.totalFrames * num, true);
    }
  };
  private animate = () => {
    this.currentRateSmooth +=
      (this.currentRate - 0.05 - this.currentRateSmooth) * 0.02;
    this.setPosition(this.currentRateSmooth);
    this.treeAnimate();
    this.animateFrame = requestAnimationFrame(this.animate);
  };

  private treePaths: any = null;
  private initSvgTree = () => {
    //初始化svg的strokeDasharray、颜色等
    this.treePaths = document.querySelectorAll('#treeSvg path');
    this.treePaths.forEach((path, i, obj) => {
      path.style.fill = 'none';
      path.style.stroke = 'hsl(' + (i * 20 + 30) + 'deg 80% 80%)';
      path.style.strokeWidth = '3px';

      if (!path.style.strokeDashoffset) {
        const length = path.getTotalLength();
        path.style.transition = path.style.WebkitTransition = 'none';
        path.style.strokeDasharray = length + ' ' + length;
        path.style.strokeDashoffset = length;
        path.strokeLength = length;
      }
    });
  };
  private treeAnimate = () => {
    //requestAnimationFrame调用，根据滚动位置实现动画
    if (!this.treePaths) {
      return;
    }
    let rate = this.currentRate - 1.5;
    const len = this.treePaths.length - 1;
    this.treePaths.forEach((path, i, obj) => {
      let rateItem = rate + (i / len) * 0.4;
      rateItem = rateItem > 1 ? 1 : rateItem;
      rateItem = rateItem < 0 ? 0 : rateItem;
      const newStrokeDashoffset = (1 - rateItem) * path.strokeLength;
      path.style.strokeDashoffset -=
        (path.style.strokeDashoffset - newStrokeDashoffset) * 0.05;
    });
  };
}
